<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>模板录入——模板管理——板房人员——鑫四合珠宝管理后台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="huyuzhu">
<!-- Le styles -->
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/base.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/uploadify.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-affix.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-modal.js"></script>
<script type="text/javascript">
<s:if test="message!=null">
$(document).ready(function(){
	$("#myModal").modal('show');
});
</s:if>

$(document).ready(function(){
	$("#addBtn").click(function(){
    	var _len = $("#templateattr tr").length;    	
    	$("#templateattr").append(
    		"<tr><td>副石"+_len+"<input type='hidden' name='attr.attrName' value='副石" +_len +"'></td><td>"+
    		"<s:property value="stoneAttrSelectString" escapeHtml="false"/>"+
            "</td><td><input type='text' name='attr.quantity'  class='w50'></td><td>"+"<s:property value="shapeAttrSelectString" escapeHtml="false"/>"+
            "</td><td><input type='text' name='attr.weight' class='w50'></td></tr>");            
	});
});	

$(document).ready(function() {
    $("#uploadify").uploadify({
        //flash
        'swf': "${pageContext.request.contextPath}/swf/uploadify.swf",
        'uploader':'${pageContext.request.contextPath}/fileUpdate.do',
        'auto': false,
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
         'cancel': '${pageContext.request.contextPath}/img/uploadify-cancel.png', 
        'fileObjName'   : 'file',
        'fileTypeDesc':'支持的格式：',
        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.png',
        //上传文件的大小限制
        'fileSizeLimit':'5MB',
        'buttonText'     : '选择图片', //按钮上的文字
        'queueID':'fileQueue',
        //上传数量
        'queueSizeLimit' : 3,
        //每次更新上载的文件的进展
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制，可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        'onSelect' : function(file) {
        	
        },
        //返回一个错误，选择文件的时候触发
        'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常！");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确！");
                    break;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
        },
        //上传到服务器，服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
        	alert("文件:" + file.name + "上传成功"); 
        	var images = "<img src='" + data + "'/>";
        	
        	var content1 = $("#image1").html();
        	var content2 = $("#image2").html();
        	var content3 = $("#image3").html();
        	
        	if(content1==""){
        		var submitdate = "<input type='hidden' name='template.image1' value='"+data+"'>";
        		$("#image1").html(images+submitdate);
        		return;
        	}
        	if(content2==""){
        		var submitdate = "<input type='hidden' name='template.image2' value='"+data+"'>";
        		$("#image2").html(images+submitdate);
        		return;
        	}
        	if(content3==""){
        		var submitdate = "<input type='hidden' name='template.image3' value='"+data+"'>";
        		$("#image3").html(images+submitdate);
        		return;
        	}
        	alert("上传图片已经达到3张!");
        }
    });
});
function deleteImg(index){
	$("#image"+index).html("");
}
function add(){
	$("#AddForm").submit();
}
</script>
</head>
<s:head theme="xhtml"/>
<sd:head debug="true" locale="zh" parseContent="true" extraLocales="en-us,zh-cn,de-de"/>
<body>
<!-- 头部 -->
<s:include value="../header.jsp"/>
<!-- 主内容区开始 -->
<div class="conBox clearfix">
<s:if test="#session.UserInfo.userVO.userType==1">
<s:include value="../a/menu.jsp">
	<s:param name="menuIndex" value="2"/>
</s:include>
</s:if>
<s:else>
<s:include value="menu.jsp">
	<s:param name="menuIndex" value="2"/>
</s:include>
</s:else>
  <div class="mainBox">
    <h1>模板录入</h1>
    <div class="ncBox">
    	<s:form action="addingTemplate" id="AddForm" cssClass="form-horizontal">
		<div class="control-group">
            <label class="control-label" for="picture">上传图片：</label>
            <div class="controls">
              <div class="picBox">
                <div id="fileQueue"></div>
                <ul class="clearfix">
                    <li>
                      <div>
                         <div id="image1"></div>
                         <a href="#" onclick="deleteImg(1);"><i class="icon-trash"></i>删除</a>
                      </div>
                    </li>
                    <li>
                      <div>
                         <div id="image2"></div>
                         <a href="#" onclick="deleteImg(2);"><i class="icon-trash"></i>删除</a>
                      </div>
                    </li>
                    <li>
                      <div>
                         <div id="image3"></div>
                         <a href="#" onclick="deleteImg(3);"><i class="icon-trash"></i>删除</a>
                      </div>
                    </li>
                  </ul>
              </div>
              <input type="file" name="file" id="uploadify" />
              <a href="javascript:$('#uploadify').uploadify('upload','*')" class="btn btn-primary">开始上传</a>  
 			  <a href="javascript:$('#uploadify').uploadifyClearQueue()" class="btn btn-primary">取消所有上传</a> 
              <p class="help-block">提示：1、建议图片最大尺寸512*512，格式：jpg,png。
                <span class="pl42">2、最多上传3张照片。</span>
              </p>
            </div>
          </div>
          <div class="control-group warning">
            <label class="control-label" for="newCode">新款号：</label>
            <div class="controls">
              <s:textfield id="newCode" name="template.newCode"/>
              <span id="NewCodeMsg" class="help-inline tred"></span>
            </div>
          </div>
           <div class="control-group warning">
            <label class="control-label" for="oldCode">旧款号：</label>
            <div class="controls">
              <s:textfield id="oldCode" name="template.oldCode"/>
               <span id="OldCodeMsg" class="help-inline tred"></span>
            </div>
          </div>
          <div class="control-group error">
            <label class="control-label" for="Name">模板名称：</label>
            <div class="controls">
              <s:textfield id="templateName" name="template.templateName"/>
               <span id="TemplateNameMsg" class="help-inline tred"></span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="">款型：</label>
            <div class="controls">
               <s:select cssClass="w150" name="template.type" list="typeAttrList" listKey="attrName" listValue="attrName"/>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="Pt950">Pt950金重：</label>
            <div class="controls">
             <s:textfield id="wpt950" name="template.wpt950"/>
               <span id="Wpt950Msg" class="help-inline tred"></span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="K18">18K金重：</label>
            <div class="controls">
             <s:textfield id="w18k" name="template.w18k"/>
               <span id="W18kMsg" class="help-inline tred"></span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="zhimo">制模人员：</label>
            <div class="controls">
              <s:textfield id="mouldingStaff" name="template.mouldingStaff"/>
               <span id="MouldingStaffMsg" class="help-inline tred"></span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="time1">制模时间：</label>
            <div class="controls">
            	<sd:datetimepicker name="template.mouldingDate" displayFormat="yyyy-MM-dd" id="mouldingDate" value="today"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="Description">备注：</label>
            <div class="controls">
              <s:textarea id="Remark" name="template.remark" cssClass="input-xlarge" rows="5"/>
            </div>
          </div>
          <input type="button" class="btn" id="addBtn" value="添加石头属性">
          <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>属性</th>
                  <th>石料</th>
                  <th>数量</th>
                  <th>形状</th>
                  <th>重量</th>
                </tr>
              </thead>
              <tbody id="templateattr">
                <tr>
                  <td>主石<input type="hidden" name="attr.attrName" value="主石"></td>
                  <td>
                    <s:select cssClass="w50" name="attr.buildingStones" list="stoneAttrList" listKey="attrName" listValue="attrName"/>
                  </td>
                  <td><input type="text" name="attr.quantity" class="w50"></td>
                  <td>
                   <s:select cssClass="w50" name="attr.shape" list="shapeAttrList" listKey="attrName" listValue="attrName"/>
                  </td>
                  <td><input type="text" name="attr.weight" class="w50"></td>
                </tr>
              </tbody>
        </table>
        <div class="form-actions">
          <input type="button" class="btn btn-primary" value="保存" onclick="add();"/>
          <s:reset cssClass="btn" value="重置"/>
          <s:a action="queryTemplateList" cssClass="btn">返回</s:a>
      </div>
      </s:form>      
    </div>
  </div>
</div>
<!-- 主内容区结束 --> 
<!-- 尾部 -->
<s:include value="../bottom.jsp"/>

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>操作提示</h3>
  </div>
  <div class="modal-body">
    <p><s:property  value="message"/></p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
  </div>
</div>
</body>
</html>